<script setup>
import { ref, watch, nextTick } from 'vue'
import ChatMessage from './ChatMessage.vue'

const props = defineProps({
  messages: {
    type: Array,
    required: true
  },
  userInfo: {
    type: Object,
    default: null
  }
})

const chatListRef = ref(null)

// 滚动到底部
function scrollToBottom() {
  if (chatListRef.value) {
    nextTick(() => {
      chatListRef.value.scrollTop = chatListRef.value.scrollHeight
    })
  }
}

// 监听消息变化，自动滚动到底部
watch(
  () => props.messages,
  () => {
    scrollToBottom()
  },
  { deep: true }
)
</script>

<template>
  <section class="chat-container">
    <div ref="chatListRef" class="chat-list">
      <ChatMessage
        v-for="m in messages"
        :key="m.id"
        :message="m"
        :user-info="userInfo"
      />
    </div>
  </section>
</template>

<style scoped>
/* 聊天容器样式 */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 64px);
  padding: 64px 0 0 0;
  min-height: 0;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px 0 12px 0;
}

/* 自定义滚动条样式 */
.chat-list::-webkit-scrollbar {
  width: 6px;
}

.chat-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.chat-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.chat-list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
</style>

